<template>
	<view class="content">
		<view class="top">
			<view class="paymoney">
				<!-- <view class="sign iconfont">&#xe604;</view> -->
				
				<view class="tongbao">{{orderInfo.totalIntegral}} 积分</view>
			</view>
		</view>
		<view class="group">
			<view class="grouplist">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="index">
						<view class="uni_name">
							<image class="uni_icon" :src="item.image" mode=""></image>
							<view class="uni_detail">{{item.name + '积分'}}</view>
						</view>
						<!-- <view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view> -->
					</label>

				</radio-group>
			</view>

		</view>
		<view class="bottom">
			<view class="submit" @click="goRecharge">立即兑换</view>
		</view>

		<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" @forgetPwd="forgetPwd" :value="paymentPwd"
		 digits="6" />
	</view>
</template>

<script>
	import ssPaymentPassword from '../../../../components/sanshui-payment-password'
	export default {
		components: {
			ssPaymentPassword
		},
		data() {
			return {
				items: [
					{
						value: '3',
						name: '余额',
						image: 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wallet.png'
					}
					// ,
					// {
					// 	value: '4',
					// 	name: '银联',
					// 	image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/bankpay.png'
					// },
					// {
					// 	value: '5',
					// 	name: '通宝',
					// 	image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/interpay.png'
					// }
				],
				payType: '',
				orderInfo: {},
				mode: 1,
				paymentPwd: '',
				payPassword: '' // 支付密码
			}
		},
		onLoad(options) {
			console.log(options)
			if (options) {
				console.log(JSON.parse(options.orderInfo))
				this.orderInfo = JSON.parse(options.orderInfo)
			}

		},
		methods: {

			radioChange: function(e) {
				console.log(e)
				this.payType = e.detail.value;
			},
			// 立即支付
			goRecharge: function() {
				let that = this;
				
					that.api.userOrderPayment({
						paytype:"3",
						uni: that.orderInfo.orderId
					}).then(res => {
						console.log(res)
						console.log(res)
						that.tui.toast(res.data)
						setTimeout(function() {
							that.cacheHelper.updateUserInfo()
							uni.$emit('myOrder', {
								msg: '页面更新'
							})
						}, 500)
						setTimeout(function() {
							uni.redirectTo({
								url: '../../user/order/order?orderType=1',
							});
						}, 1500)
					}).catch(err => {
						console.log(err)
						that.tui.toast(err.msg)
						setTimeout(function() {
							uni.redirectTo({
								url: '../../user/order/order?orderType=0',
							});
						}, 1500)
					})

				

			},
			// 余额支付
			submitHandle: function(e) {
				let that = this;
				that.payPassword = e.value;
				that.api.userOrderPayment({
					paytype: that.payType,
					uni: that.orderInfo.orderId,
					payPassword: that.payPassword
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function() {
						that.cacheHelper.updateUserInfo()
						uni.$emit('myOrder', {
							msg: '页面更新'
						})
					}, 500)
					setTimeout(function() {
						uni.redirectTo({
							url: '../../user/order/order?orderType=1',
						});
					}, 1500)

				}).catch(err => {
					console.log(err, "err-------");
					that.tui.toast(err.msg)
					setTimeout(function() {
						uni.redirectTo({
							url: '../../user/order/order?orderType=0',
						});
					}, 1500)
				})
			},
			// 忘记密码
			forgetPwd: function() {
				uni.navigateTo({
					url: '../../user/paymentSetting/setPayPassword/setPayPassword',
				});
			},



		},
		// 监听返回按钮
		onBackPress(e) {
			console.log(e)
			setTimeout(function() {
				uni.$emit('myOrder', {
					msg: '页面更新'
				})
			}, 500)
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		box-sizing: border-box;
		text-align: center;

		.paymoney {
			width: 418rpx;
			margin: 20rpx auto 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			// align-items: flex-end;
			font-size: 80rpx;
			color: #333333;
			font-weight: bold;
			.money {
				line-height: 100rpx;
			}
			.sign {
				font-size: 50rpx;
				color: #FFDA71;
				padding-top: 15rpx;
			}
			.tongbao {
				font-size: 30rpx;
				margin-left: 5rpx;
				padding-top: 20rpx;
			}
		}

		.payInput {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 60rpx;
			color: #333333;

			.sign {
				font-size: 50rpx;
				color: #FFDA71;
			}

			.money {
				width: calc(100% - 80rpx);
				box-sizing: border-box;
				padding-left: 15rpx;
				text-align: left;

				.pla {
					color: #999999;
					font-size: 40rpx;
				}
			}

		}


	}

	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0 180rpx 0;

		.grouplist {
			width: 100%;
			box-sizing: border-box;

			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80rpx;
				padding: 10rpx 0;

				.radio {
					transform: scale(0.8);
				}

				.uni_name {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.uni_icon {
						width: 50rpx;
						height: 50rpx;
					}

					.uni_detail {
						padding-left: 22rpx;
					}

				}


			}



		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0rpx 50rpx;
		margin-top: 100rpx;

		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}
</style>
